<template>
  <el-dialog
    title='新增送货通知单'
    :visible.sync='visible'
    fullscreen
  >
    <el-form :model="form" :rules="rules" ref="ruleForm" :label-width="formLabelWidth">
      <el-row>
        <el-col :span="6">
          <el-form-item label="送货日期" prop="ftime">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.ftime" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物流公司" prop="flogistics">
            <el-input v-model="form.flogistics" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="快递单号" prop="fpo">
            <el-input v-model="form.fpo" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="选单号" prop="fbillno">
            <el-input v-model="form.fbillno" clearable disabled>
              <el-button slot="append" @click="chooseFbillno">选择</el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="备注" prop="fnote">
            <el-input v-model="form.fnote" clearable type="textarea" autosize></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收货人" prop="freceiver">
            <el-input v-model="form.freceiver" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话" prop="fphone">
            <el-input v-model="form.fphone" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收货地址" prop="faddress">
            <el-input v-model="form.faddress" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table :data="ywDeliveryEntryList">
        <el-table-column
          type="index"
          fixed="left"
          width="50">
        </el-table-column>
        <el-table-column
          property="FNumber"
          label="物料代码"
          width="150"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          property="FName"
          label="物料名称"
          width="150"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          property="FModel"
          label="规格"
          width="150"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          property="funit"
          label="单位"
          width="150"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          property="FAuxQty"
          label="订单数量"
          width="150"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="送货数量"
          width="250">
          <template slot-scope="scope">
            <el-input-number controls-position="right" v-model="scope.row.fqty" @change="handleFqtyChange($event, scope)"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          property="fnote"
          label="备注"
          width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fnote"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          property="FBillNo"
          label="采购订单号"
          width="150"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          property="FEntrySelfP0275"
          label="采购特殊要求"
          width="150"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="handleOk" v-loading.fullscreen.lock="fullscreenLoading">确 定</el-button>
    </div>
    <ChooseSupplyModal ref="chooseSupplyModal" @chooseSupplyBack="supplyBack"></ChooseSupplyModal>
  </el-dialog>

</template>

<script>
import ChooseSupplyModal from './ChooseSupplyModal'
import {mapState} from 'vuex'
export default {
  name: 'DeliveryNoticeFormModal',
  data () {
    return {
      visible: false,
      fullscreenLoading: false,
      formLabelWidth: '120px',
      rules: {
        ftime: [{type: 'date', required: true, message: '请选择', trigger: 'change'}]
      },
      form: {
        ftime: '',
        flogistics: '',
        fpo: '',
        fbillno: '',
        freceiver: '',
        fphone: '',
        faddress: '',
        fnote: ''
      },
      ywDeliveryEntryList: []
    }
  },
  components: { ChooseSupplyModal },
  computed: {
    ...mapState({
      fsupplierid: state => state.fsupplierid
    })
  },
  methods: {
    handleFqtyChange (val, scope) {
      this.$set(this.ywDeliveryEntryList, scope.$index, {...scope.row, fqty: val})
      // this.$forceUpdate()
    },
    show () {
      this.visible = true
      this.$nextTick(() => {
        this.ywDeliveryEntryList = []
        this.$refs.ruleForm.resetFields()
      })
    },
    chooseFbillno () {
      this.$refs.chooseSupplyModal.show()
    },
    supplyBack (rows) {
      console.log(rows)
      let record = rows.selectionRows.map(item => {
        item.fqty = item.fquantity
        return item
      })
      let FBillNo = record[0].FBillNo || ''
      let FNumbers = record.map(item => item.FNumber)
      let filtArr = this.ywDeliveryEntryList.filter(item => item.FBillNo !== FBillNo || FNumbers.includes(item.FNumber))
      if (filtArr.length) {
        this.$message.warning('请选择同一个单据编号或已存在重复得物料号！')
      } else {
        this.form.fbillno = FBillNo
        this.ywDeliveryEntryList = [...this.ywDeliveryEntryList, ...record]
      }
    },
    handleOk () {
      let filtArr = this.ywDeliveryEntryList.filter(item => {
        return Number(item.fqty || 0) <= 0 || Number(item.fqty || 0) > Number(item.fquantity)
      })
      console.log(filtArr)
      if (!this.ywDeliveryEntryList.length) {
        this.$message.warning('请选择选单号！')
        return false
      }
      if (filtArr.length) {
        this.$message.warning('请输入送货数量或送货数量已超过原有数量！')
        return false
      }
      let formatData = {
        ...this.form,
        fsupplierid: this.fsupplierid,
        ywDeliveryEntryList: this.ywDeliveryEntryList.map(item => {
          return {
            fdetailid: item.id,
            fitemid: item.fitemid,
            fqty: item.fqty,
            fnote: item.fnote
          }
        })
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true
          this.Http.post('/yw_supplier_user/ywSupplierUser/addDelivery', formatData
          ).then(res => {
            if (res.data.success) {
              this.$message.success('新增成功！')
              this.visible = false
              this.fullscreenLoading = false
              this.$emit('modalOk')
            } else {
              this.$message.error(res.data.message)
              this.fullscreenLoading = false
            }
          }).catch((error) => {
            console.log(error)
            this.fullscreenLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-footer{
  position: absolute;
  right: 0;
  bottom: 0;
  button {
    display: inline-block;
  }
}

</style>
